<template>
  <home-layout>
    <template #header>
      <div>
        <center style="font-size: large;line-height: 3em;">
          个人中心
        </center>
      </div>
    </template>
    <!-- 个人头像&昵称区域 -->
    <van-cell-group style="margin-top: 20px;">
      <!-- 未登录状态下的头像显示 -->
      <van-cell
        v-if="loginStatus===0"
        is-link
        @click="toLoginPage"
      >
        <template #icon>
          <van-image
            width="2rem"
            height="2rem"
            round
            fit="cover"
            src="images/common/default-avatar.png"
          />
        </template>
        <template #right-icon>
          <h2 style="margin-left: 2em;margin-top: 1.3em;">点击登录</h2>
        </template>
      </van-cell>
      <!-- 已登录状态下的头像显示 -->
      <van-cell
        v-else
        is-link
        @click="toUserCenterPage"
      >
        <template #icon>
          <van-image
            width="2rem"
            height="2rem"
            round
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </template>
        <template #right-icon>
          <van-row style="width: 72%; margin-left: 10%;margin-top: 0em;">
            <van-col :span="15">
              <h2>{{ userInfo.nickName }}</h2>
              <span style="position: relative;top:-1.2em">您的身份为：{{ roleName }}</span>
            </van-col>
            <van-col :span="9">
              <van-button
                style="top: 0.5rem;position: relative;font-size: 50%;"
                round
                color="linear-gradient(to bottom right,#0cebeb,#20e3b2,#29ffc6)"
                plian
              >个人中心</van-button>
            </van-col>
          </van-row>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 功能列表区域 -->
    <van-cell-group style="margin-top: 50px;">
      <van-cell
        value="设置"
        icon="setting-o"
        is-link
        @click="toSettingPage"
      />
      <van-cell
        value="功能2"
        is-link
      />
      <van-cell
        value="功能3"
        is-link
      />
    </van-cell-group>
  </home-layout>
</template>

<script>
import HomeLayout from '@/views/layout/HomeLayout'
import { Cell, CellGroup, Image, Toast, Row, Col } from 'vant'
import { getToken } from '@/utils/auth'
import RoleEnum from '@/utils/roleEnum'

export default {
  name: 'Mine',
  components: {
    HomeLayout,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Image.name]: Image,
    [Row.name]: Row,
    [Col.name]: Col
  },
  props: {},
  data () {
    return {
      loginStatus: 0, // 0未登录，1学生登录，2教师登录
      roleName: '', // 角色名称
      userInfo: {} // 用户信息
    }
  },
  computed: {},
  watch: {},
  created () {
    // 当前存在token时，获取用户信息
    // setToken('0ef5b5ab-6bdf-43ff-ac59-3c469a245af2')
    if (getToken()) {
      this.$store.dispatch('user/getInfo').then(data => {
        this.userInfo = data
        if (data.role === RoleEnum.Student.code) {
          this.loginStatus = 1
          this.roleName = RoleEnum.Student.name
        } else if (data.role === RoleEnum.Teacher.code) {
          this.loginStatus = 2
          this.roleName = RoleEnum.Teacher.name
        } else {
          Toast.fail('异常的登录信息')
        }
      }).then(() => { })
    }
  },
  mounted () { },
  methods: {
    toLoginPage () { // 跳转登录页
      this.$router.push({
        name: 'Login',
        query: {
          redirect: this.$route.fullPath
        }
      })
    },
    toUserCenterPage () { // 跳转个人中心页
      this.$router.push({
        name: this.loginStatus === 1 ? 'MineCenterStudent' : 'MineCenterTeacher',
        query: {
          username: this.userInfo.username
        }
      })
    },
    toSettingPage () { // 跳转设置页
      this.$router.push({
        name: 'MineSettings',
        query: {
          username: this.userInfo.username
        }
      })
    }
  }
}
</script>

<style scoped lang="less"></style>
